<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>领取优惠券</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
</head>

<body>

<div id="wrapper">
	
	<!--按钮-->
	<div class="main-btn">
		<input class="back-btn" type="button" value="返回" />
	</div>
	
	<!--优惠券详情-->
	<div class="weal-dtlMod">
		<h5 class="title dm-clearfix">
			<span class="txt">优惠券详情</span>
			<input class="edit-btn" type="button" value="编辑" />
		</h5>
		<div class="weal-info">
			<table class="dm-table" border="1" bordercolor="#ddd" cellpadding="0" cellspacing="0">
				<tr>
					<td class="tr" width="120">优惠券编号：</td>
					<td class="tl">20198321907391109</td>
					<td class="tr" width="120">名称：</td>
					<td class="tl">暖心冬至礼</td>
					<td class="tr" width="120">优惠券标签：</td>
					<td class="tl">普通</td>
					<td class="tr" width="120">优惠券种类：</td>
					<td class="tl">满减</td>
				</tr>
				<tr>
					<td class="tr">新增时间：</td>
					<td class="tl">2018-10-01 15:23:24</td>
					<td class="tr">有效期始：</td>
					<td class="tl">2018-10-02 00:00:00</td>
					<td class="tr">有效期至：</td>
					<td class="tl">2018-10-02 23:59:59</td>
					<td class="tr">适用区域：</td>
					<td class="tl">全国</td>
				</tr>
				<tr>
					<td class="tr">领取记录：</td>
					<td class="tl">100条</td>
					<td class="tr">使用记录：</td>
					<td class="tl">90条</td>
					<td class="tr">是否自动推送：</td>
					<td class="tl">是</td>
					<td class="tr">是否推荐：</td>
					<td class="tl">是</td>
				</tr>
				<tr>
					<td class="tr red">金额：</td>
					<td class="tl red" colspan="7">¥20.00</td>
				</tr>
			</table>
		</div>
	</div>
	
	<!--使用记录-->
	<div class="main-nav bg-w">
		<ul class="nav-box dm-clearfix">
			<li class="on" @click="tab(0)">领取记录</li>
			<li @click="tab(1)">使用记录</li>
		</ul>
		<div class="main-table">
			<table class="dm-table" cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="#ddd">
				<tr>
					<th width="50">序号</th>
					<th>用户名</th>
					<th>手机号</th>
					<th>优惠券序号</th>
					<th>时间</th>
				</tr>
				<tr class="tc" v-for="(item,index) in historyData">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.rank}}</td>
					<td>{{item.time}}</td>
				</tr>
			</table>
			
			<div class="pageMod">
				<input type="button" class="first-btn" value="首页" />
				<input type="button" class="prev-btn" value="上一页" />
				<div class="page-box">
					<a class="on">1</a>
					<a>2</a>
					<a>3</a>
					<a>4</a>
					<span>…</span>
					<a>100</a>
				</div>
				<input type="button" class="next-btn" value="下一页" />
				<input type="button" class="last-btn" value="末页" />
			</div>
		</div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		historyData:data.wealHistory,
	},
	methods:{
		tab:function(type){
			$(".nav-box li").eq(type).addClass('on').siblings().removeClass('on');
		},
	}
});

</script>

</body>
</html>
